<script lang="ts">
    import { useDropdownContext, type DropdownMenuProps } from ".";
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";

    const props: DropdownMenuProps = $props();
    const ctx: any = useDropdownContext();
    const classList = $derived(useClassList(props, "cm-dropdown-list"));

    const style = $derived(
        useStyle(props, {
            background: ctx?.gradient ? `linear-gradient(${ctx.gradient?.join(",")})` : "",
        })
    );
</script>

<ul class={classList} {style}>{@render props.children?.()}</ul>
